<template>
	<view class="container">
		<view>
			<view v-if='stores && stores.length == 0' style='padding:20vh 15%;font-size:12px;'>
				<view >
					<u-empty text="定位失败,请检查" mode="address"></u-empty>
					<view>1.手机系统设置中<text class='tips'>"微信"的定位权</text>限是否开启。</view>
					<view style='padding-top:10px'>2.<text class='tips'>手机GPS</text>是否打开。</view>
				</view>
			</view>
			<view v-else>
				<view v-for="item in stores" class='list'>
					<view style="padding-top:10px" @click="toMap(item)">
						<u-row>
							<u-col span="8" >
								<view class="name" >{{item.name}}
								</view>
								<view class="sub-title" style='padding-left:5px;'>营业时间: {{item.period}}</view>
							</u-col>
						</u-row>
					</view>
					<view class="sub-title" @click="chooseStore(item)">
						<u-icon name="map" size="22" :label='item.address'></u-icon>
					</view>
					<view class="sub-title" v-if="item.distance" @click="chooseStore(item)">
						距离：{{item.distance}}km
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				stores: [],
				myLat: '',
				myLon: '',
				keyword: ''
			}
		},
		onShow() {
			this.getAuthorizeInfo()
		},
		onLoad() {
			
		},
		methods: {
			//获取定位
			getAuthorizeInfo(a = "scope.userLocation") { //1. uniapp弹窗弹出获取授权（地理，个人微信信息等授权信息）弹窗
				var _this = this;
				uni.authorize({
					scope: a,
					success() { //1.1 允许授权
						console.log('有授权')
						_this.getLocationInfo();
					},
					fail() { //1.2 拒绝授权
						console.log('没有授权')
						uni.showModal({
							title: '温馨提示',
							content: '获取定位失败，为了给您提供更好的体验，请您点击右上角。。。，点击设置，微信信息设置选择允许,如有疑问请联系客服！',
							showCancel: false,
							confirmText: '我知道了',
							success: () => {
								_this.getDefaultStore()
							}
						})
					}
				})
			},
			toMap(store) {
				console.log(store)
				uni.openLocation({
					latitude: store.latitude,
					longitude: store.longitude,
					scale: 18,
					name: store.name,
					address: store.address
				})
			},
			getDistance(storeLat, storeLon) {
				var radLat1 = this.myLat * Math.PI / 180.0;
				var radLat2 = storeLat * Math.PI / 180.0;
				var a = radLat1 - radLat2;
				var b = this.myLon * Math.PI / 180.0 - storeLon * Math.PI / 180.0;
				var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) +
					Math.cos(radLat1) * Math.cos(radLat2) * Math.pow(Math.sin(b / 2), 2)));
				s = s * 6378.137; // EARTH_RADIUS;
				s = Math.round(s * 10000) / 10000;
				return s.toFixed(2);
			},
			getLocationInfo() { //2. 获取地理位置
				var _this = this;
				uni.getLocation({
					type: 'wgs84',
					success(res) {
						console.log("你当前经纬度是：");
						console.log(res)
						let latitude, longitude;
						latitude = res.latitude.toString();
						longitude = res.longitude.toString();
						_this.myLat = latitude
						_this.myLon = longitude
						//自动获取最近的门店
						_this.request.get("public/stores", {
							// "@filter": `math.locationDistance(entity.getLongitude(), entity.getLatitude(), ${longitude}, ${latitude}) < 100 && entity.getStatus() != 1`,
							'@filter': 'entity.getStatus() == 1',
							"@sort": `math.locationDistance(x.getLongitude(),x.getLatitude(),${longitude},${latitude}) > math.locationDistance(y.getLongitude(), y.getLatitude(),${longitude},${latitude})`
						}).then((res) => {
							for(let i in res.data){
								let distance = _this.getDistance(res.data[i].latitude, res.data[i]
									.longitude)
								res.data[i]['distance'] = distance
							}
							_this.stores = res.data
						})
					},
					fail() {
						uni.showModal({
							title: '',
							content: '定位失败，请打开您手机的GPS',
							cancelText: '手动选择',
							confirmColor: '确定',
							success: ((data) => {
								if (data.cancel) {
									_this.getDefaultStore()
								}
							})
						})
					}
				});
			},
			findStore(){
				let filter = `entity.getStatus() == 1`
				if(this.keyword != ''){
					filter += ` && entity.getName() matches '${this.keyword}'`
				}
				this.request.get(`public/stores`,{
					'@filter': filter
				}).then((res) => {
					console.log('stores',res.data)
					this.stores = res.data
				})
			},
			//获取默认的店铺，只有在定位失败的时候运行
			getDefaultStore() {
				console.log(this.regionId)
				this.request.get("public/stores",{
					'@filter': 'entity.getStatus() == 1'
				}).then((res) => {
					this.stores = res.data
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.title {
		color: #606266;
		padding: 10px;
	}

	.name {
		font-weight: bold;
		padding-left: 5px;
	}

	.more {
		color: #909399;
		font-size: 12px;
		text-align: right;
		padding: 20px 10px;
	}

	.sub-title {
		font-size: 12px;
		color: #909399;
		padding: 8px 0px;
	}

	.list {
		margin: 5px;
		background-color: #fff;
		border-radius: 5px;
		padding: 10px;
	}

	.container {
		background-color: #f3f3f3;
		padding: 10px;
		min-height: 100vh;
		overflow: auto;
	}

	.tips {
		color: #F6B423
	}
</style>